<template xmlns:background-color="http://www.w3.org/1999/xhtml">
  <!--文件管理-文件查看-其他部门-->
  <a-row>
    <a-col :span="6" style="margin-right: 10px">
      <a-card :bordered="false">
        <!-- 按钮操作区域 -->
        <a-row style="margin-left: 14px">
          <!-- <a-button @click="handleAdd(1)" type="primary">添加部门</a-button>
            <a-button @click="handleAdd(2)" type="primary">添加下级</a-button>
            <a-button type="primary" icon="download" @click="handleExportXls('部门信息')">导出</a-button> -->
          <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
              <a-button type="primary" icon="import">导入</a-button>
            </a-upload> -->
          <!-- <a-button title="删除多条数据" @click="batchDel" type="default">批量删除</a-button> -->
          <!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>-->
        </a-row>
        <div style="background: #fff; padding-left: 16px; height: 100%; margin-top: 5px">
          <!-- <a-alert type="info" :showIcon="true">
            <div slot="message">
              当前选择：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
              <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
            </div>
          </a-alert> -->
          <!-- <a-input-search @search="onSearch" style="width: 100%; margin-top: 10px" placeholder="请输入部门名称" /> -->
          <!-- 树-->
          <a-col :md="10" :sm="24">
            <template>
              <a-tree multiple @select="onSelect" @check="onCheck" @rightClick="rightHandle"
                :selectedKeys="selectedKeys" :checkedKeys="checkedKeys" :treeData="treeData"
                :checkStrictly="checkStrictly" :expandedKeys="iExpandedKeys" :autoExpandParent="autoExpandParent"
                @expand="onExpand">

              </a-tree>

            </template>
          </a-col>
        </div>
      </a-card>
      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
      <!-- <div class="drawer-bootom-button">
          <a-dropdown :trigger="['click']" placement="topCenter">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
              <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
              <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
              <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
              <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
              <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
            </a-menu>
            <a-button>
              树操作 <a-icon type="up" />
            </a-button>
          </a-dropdown>
        </div> -->
      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
    </a-col>
    <!-- <a-input-search @search="onSearch" style="width: 73%; margin-bottom: 5px" placeholder="请输入文件名称" /> -->
    <a-col :span="5" style="margin-right: 10px">
      <!-- <a-tabs defaultActiveKey="1"> -->
      <!-- <a-tab-pane tab="基本信息" key="1" > -->
      <a-card :bordered="false" v-if="selectedKeys.length > 0">
        <span style="font-size:18px;font-weight:bold">文件目录:</span>
        <a-form-model ref="form" :model="model" :rules="validatorRules">

          <a-tree multiple @select="onSelect1" @check="onCheck" @rightClick="rightHandle" :selectedKeys="selectedKeys"
            :checkedKeys="checkedKeys" :treeData="treeData1" :checkStrictly="checkStrictly"
            :expandedKeys="iExpandedKeys" :autoExpandParent="autoExpandParent" @expand="onExpand" />
        </a-form-model>
      </a-card>
      <a-card v-else class="span1">
        <a-empty>
          <span slot="description"> 请先选择一个部门! </span>
        </a-empty>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-dropdown :trigger="['contextmenu']">
        <a-card :bordered="false" v-if="selectedKeys1.length > 0">
          <a-table ref="table" @change="handleTableChange" :pagination="ipagination" rowKey="id" :columns="columns"
            :data-source="data1">
            <template slot="action" slot-scope="text, record">
              <a type="primary" @click="downloadFile(record)" icon="download">下载文件</a>
              <a type="primary"><file-preview :file="record" txt="查看文件"></file-preview></a>
            </template>
          </a-table>
        </a-card>
        <a-card v-else class="span2">
          <a-empty>
            <span slot="description"> 请先选择一个文件夹! </span>
          </a-empty>

        </a-card>
        <a-menu slot="overlay">
          <!-- <a-menu-item @click="handleAdd">上传文件</a-menu-item> -->
          <!-- <upload-file ></upload-file> -->
          <!-- <a-menu-item @click="closeDrop" key="3">取消</a-menu-item> -->
        </a-menu>
      </a-dropdown>
    </a-col>
    <depart-modal ref="departModal" @ok="loadTree"></depart-modal>
  </a-row>
</template>
<script>
  import DepartModal from './modules/DirectoryFileModal'
  import {
    queryDepartTreeList,
    searchByKeywords,
    deleteByDepartId
  } from '@/api/api'
  import {
    httpAction,
    deleteAction,
    getFileAccessHttpUrl
  } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  // import DepartAuthModal from './modules/DepartAuthModal'
  import Vue from 'vue'
  import {
    getAction
  } from '../../../api/manage'

  export default {
    name: 'DepartList',
    mixins: [JeecgListMixin],
    components: {
      // DepartAuthModal,
      DepartModal
    },
    data() {
      return {
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        iExpandedKeys: [],
        data2: [],
        loading: false,
        autoExpandParent: true,
        currFlowId: '',
        currFlowName: '',
        disable: true,
        treeData: [],
        treeData1: [],
        visible: false,
        departTree: [],
        rightClickSelectedKey: '',
        rightClickSelectedOrgCode: '',
        hiding: true,
        model: {},
        dropTrigger: '',
        depart: {},
        departId1: '',
        columns: [{
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 70,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            },
          },

          {
            title: '文件名',
            dataIndex: 'name',
            width: '24%',
            defaultValue: '',
          },
          {
            title: '上传人',
            dataIndex: 'createBy',
            width: '24%',
            defaultValue: '',
          },
          {
            title: '上传时间',
            dataIndex: 'createTime',
            width: '30%',
            defaultValue: '',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 147,
            scopedSlots: {
              customRender: 'action'
            },
          },
        ],
        data1: [],
        disableSubmit: false,
        checkedKeys: [],
        selectedKeys: [],
        selectedKeys1: [],
        autoIncr: 1,
        currSelected: {},
        allTreeKeys: [],
        departId: '',
        orgFileIds: '',
        checkStrictly: true,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        graphDatasource: {
          nodes: [],
          edges: [],
        },
        validatorRules: {
          departName: [{
            required: true,
            message: '请输入机构/部门名称!'
          }],
          orgCode: [{
            required: true,
            message: '请输入机构编码!'
          }],
          orgCategory: [{
            required: true,
            message: '请输入机构类型!'
          }],
          mobile: Vue.prototype.rules.mobile2,
        },
        orgCategoryDisabled: false,
        oldDirectorUserIds: '',
        url: {
          list: '/system/sysOrgFile/querySysOrgFileList'
        },
      }
    },
    computed: {

    },
    created() {},
    mounted() {
      this.loadTree()
    },
    computed: {

    },
    methods: {
      downloadFile(record) {
        // console.log('gds',record);
        if (!record) {
          this.$message.warning("未知的文件")
          return;
        }
        // if(record.indexOf(",")>0){
        //   record = text.substring(0,text.indexOf(","))
        // }
        let url = getFileAccessHttpUrl(record.fileUrl)
        window.open(url);
      },

      loadTree() {
        var that = this
        that.treeData = []
        // console.log('dgs', ...mapGetters(["departnameid"]));
        // getAction(`/system/sysOrgFile/queryDepartTreeList?departId=${this.departnameid}`).then((res) => {
        getAction('/system/sysOrgFile/queryDepartTreeList').then((res) => {
          if (res.success) {
            //部门全选后，再添加部门，选中数量增多
            if (res.result && res.result.length > 0) {
              for (let i = 0; i < res.result.length; i++) {
                let temp = res.result[i]
                that.treeData.push(temp)
                that.setThisExpandedKeys(temp)
              }
            }
            this.loading = false
          }
        })
      },
      setThisExpandedKeys(node) {
        if (node.children && node.children.length > 0) {
          this.iExpandedKeys.push(node.key)

          for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
        }
      },

      // 右键操作方法
      rightHandle(node) {
        this.dropTrigger = 'contextmenu'
        // console.log(node.node.eventKey)
        this.rightClickSelectedKey = node.node.eventKey
        this.rightClickSelectedOrgCode = node.node.dataRef.orgCode
      },
      onExpand(expandedKeys) {
        // console.log('onExpand', expandedKeys)
        this.iExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },

      backFlowList() {
        this.$router.back(-1)
      },
      // 右键点击下拉框改变事件
      dropStatus(visible) {
        if (visible == false) {
          this.dropTrigger = ''
        }
      },
      // 右键下拉关闭下拉框
      closeDrop() {
        this.dropTrigger = ''
      },
      addRootNode() {
        this.$refs.nodeModal.add(this.currFlowId, '')
      },
      batchDel: function() {

        // console.log(this.checkedKeys)
        if (this.checkedKeys.length <= 0) {
          this.$message.warning('请选择一条记录！')
        } else {
          var ids = ''
          for (var a = 0; a < this.checkedKeys.length; a++) {
            ids += this.checkedKeys[a] + ','
          }
          var that = this
          this.$confirm({
            title: '确认删除',
            content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据，以及子节点数据吗?',
            onOk: function() {
              deleteAction(that.url.deleteBatch, {
                ids: ids
              }).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.loadTree()
                  that.onClearSelected()
                } else {
                  that.$message.warning(res.message)
                }
              })
            },
          })
        }
      },
      onSearch(value) {
        let that = this
        if (value) {
          searchByKeywords({
            keyWord: value
          }).then((res) => {
            if (res.success) {
              that.departTree = []
              for (let i = 0; i < res.result.length; i++) {
                let temp = res.result[i]
                that.departTree.push(temp)
              }
            } else {
              that.$message.warning(res.message)
            }
          })
        } else {
          that.loadTree()
        }
      },
      nodeModalOk() {
        this.loadTree()
      },
      nodeModalClose() {},
      hide() {
        // console.log(111)
        this.visible = false
      },
      onCheck(checkedKeys, info) {
        // console.log('onCheck', checkedKeys, info)
        this.hiding = false
        //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
        if (this.checkStrictly) {
          this.checkedKeys = checkedKeys.checked
        } else {
          this.checkedKeys = checkedKeys
        }
        //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
      },
      onSelect(selectedKeys, e) {
        //   console.log('selected', selectedKeys, e)
        //   this.hiding = false
        let record = e.node.dataRef
        // console.log('onSelect-record', record)
        this.currSelected = Object.assign({}, record)
        this.model = this.currSelected
        this.selectedKeys = [record.key]
        this.model.parentId = record.parentId
        this.setValuesToForm(record)
        //   this.$refs.departAuth.show(record.id);
        this.oldDirectorUserIds = record.directorUserIds
        this.departId1 = record.id
        this.treeData1 = []
        getAction(`/system/sysOrgFile/querySysOrgFileList?departId=${this.departId1}`).then((res) => {
          if (res.success) {
            if (res.result && res.result.length > 0) {
              for (let i = 0; i < res.result.length; i++) {
                let temp = res.result[i]
                this.treeData1.push(temp)
                this.setThisExpandedKeys(temp)
              }
            }
            this.loading = false
          }
        })
        //update-beign-author:taoyan date:20220316 for: VUEN-329【bug】为什么不是失去焦点的时候，触发手机号校验
        //   this.$nextTick(()=>{
        //     this.$refs.form.validateField('mobile')
        //   })
        //update-end-author:taoyan date:20220316 for: VUEN-329【bug】为什么不是失去焦点的时候，触发手机号校验
      },
      onSelect1(selectedKeys1, z) {
        // console.log('selected', selectedKeys1, z)
        this.hiding = false
        let record = z.node.dataRef
        // console.log('onSelect-record1', record)
        this.currSelected = Object.assign({}, record)
        this.model1 = this.currSelected
        this.selectedKeys1 = [record.key]
        this.model1.parentId = record.parentId
        this.setValuesToForm(record)
        this.orgFileIds = record.id
        //   this.$refs.departAuth.show(record.id);
        this.oldDirectorUserIds = record.directorUserIds
        this.data1 = []
        getAction(`/system/sysOrgFileDetail/queryList?orgFileId=${this.orgFileIds}&departType=${2}`).then((res) => {
          if (res.success) {

            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              this.data1.push(temp)
              // console.log('ds',this.data1);
            }
            this.loading = false
          }
        })

      },
      // 触发onSelect事件时,为部门树右侧的form表单赋值
      setValuesToForm(record) {
        //   if(record.orgCategory == '1'){
        //     this.orgCategoryDisabled = true;
        //   }else{
        //     this.orgCategoryDisabled = false;
        //   }
      },
      handlePreview(record) {
        // console.log('rfedw',record);
        if (record && record.fileUrl) {

          let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(record.fileUrl)
          window.open(url, '_blank')
        }
      },
      getCurrSelectedTitle() {
        return !this.currSelected.title ? '' : this.currSelected.title
      },
      onClearSelected() {
        this.hiding = true
        this.checkedKeys = []
        this.currSelected = {}
        this.selectedKeys = []
        this.$refs.departAuth.departId = ''
      },
      handleNodeTypeChange(val) {
        this.currSelected.nodeType = val
      },
      notifyTriggerTypeChange(value) {
        this.currSelected.notifyTriggerType = value
      },
      receiptTriggerTypeChange(value) {
        this.currSelected.receiptTriggerType = value
      },
      // submitCurrForm() {
      //   this.$refs.form.validate(valid => {
      //     if (valid) {
      //       if (!this.currSelected.id) {
      //         this.$message.warning('请点击选择要修改部门!')
      //         return
      //       }

      //       //update-begin---author:wangshuai ---date:20200308  for：[JTC-119]在部门管理菜单下设置部门负责人
      //       this.currSelected.oldDirectorUserIds = this.oldDirectorUserIds
      //       //update-end---author:wangshuai ---date:20200308  for：[JTC-119]在部门管理菜单下设置部门负责人

      //       httpAction(this.url.edit, this.currSelected, 'put').then((res) => {
      //         if (res.success) {
      //           this.$message.success('保存成功!')
      //           this.loadTree()
      //         } else {
      //           this.$message.error(res.message)
      //         }
      //       })
      //     }
      //   })
      // },
      // emptyCurrForm() {
      //   this.$refs.form.resetFields();
      //   this.model={}
      // },
      // nodeSettingFormSubmit() {
      //   this.$refs.form.validate(valid => {
      //     if (valid) {
      //       console.log('Received values of form: ', this.model)
      //     }
      //   })
      // },
      // openSelect() {
      //   this.$refs.sysDirectiveModal.show()
      // },
      handleAdd() {
        this.$refs.departModal.add(this.orgFileIds)
        // if (num == 1) {
        //   this.$refs.departModal.add()
        //   this.$refs.departModal.title = '新增'
        // } else if (num == 2) {
        //   let key = this.currSelected.key
        //   if (!key) {
        //     this.$message.warning('请先点击选中上级部门！')
        //     return false
        //   }
        //   this.$refs.departModal.add(this.selectedKeys)
        //   this.$refs.departModal.title = '新增'
        // } else {
        //   this.$refs.departModal.add(this.rightClickSelectedKey)
        //   this.$refs.departModal.title = '新增'
        // }
      },
      // handleDelete() {
      //   var that = this
      //   this.$confirm({
      //     title: '确认删除',
      //     content: '确定要删除此部门以及子节点数据吗?',
      //     onOk: function () {
      //       deleteByDepartId({id: that.rightClickSelectedKey}).then((resp) => {
      //         if (resp.success) {
      //           //删除成功后，去除已选中中的数据
      //           that.checkedKeys.splice(that.checkedKeys.findIndex(key => key === that.rightClickSelectedKey), 1);
      //           that.$message.success('删除成功!')
      //           that.loadTree()
      //           //删除后同步清空右侧基本信息内容
      //           let orgCode=that.model.orgCode;
      //           if(orgCode && orgCode === that.rightClickSelectedOrgCode){
      //             that.onClearSelected()
      //           }
      //         } else {
      //           that.$message.warning('删除失败!')
      //         }
      //       })
      //     }
      //   })
      // },
      // selectDirectiveOk(record) {
      //   console.log('选中指令数据', record)
      //   this.nodeSettingForm.setFieldsValue({directiveCode: record.directiveCode})
      //   this.currSelected.sysCode = record.sysCode
      // },
      // getFlowGraphData(node) {
      //   this.graphDatasource.nodes.push({
      //     id: node.id,
      //     text: node.flowNodeName
      //   })
      //   if (node.children.length > 0) {
      //     for (let a = 0; a < node.children.length; a++) {
      //       let temp = node.children[a]
      //       this.graphDatasource.edges.push({
      //         source: node.id,
      //         target: temp.id
      //       })
      //       this.getFlowGraphData(temp)
      //     }
      //   }
      // },
      //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
      // expandAll () {
      //   this.iExpandedKeys = this.allTreeKeys
      // },
      // closeAll () {
      //   this.iExpandedKeys = []
      // },
      // checkALL () {
      //   this.checkStriccheckStrictlytly = false
      //   this.checkedKeys = this.allTreeKeys
      // },
      // cancelCheckALL () {
      //   //this.checkedKeys = this.defaultCheckedKeys
      //   this.checkedKeys = []
      // },
      // switchCheckStrictly (v) {
      //   if(v==1){
      //     this.checkStrictly = false
      //   }else if(v==2){
      //     this.checkStrictly = true
      //   }
      // },
      // getAllKeys(node) {
      //   // console.log('node',node);
      //   this.allTreeKeys.push(node.key)
      //   if (node.children && node.children.length > 0) {
      //     for (let a = 0; a < node.children.length; a++) {
      //       this.getAllKeys(node.children[a])
      //     }
      //   }
      // }
      //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
    },
    created() {
      this.currFlowId = this.$route.params.id
      this.currFlowName = this.$route.params.name
      // this.loadTree()
    },
  }
</script>
<style scoped>
  .span1 {
    display: inline-block;
    width: 230px;
    height: 200px;
  }

  .span2 {
    display: inline-block;
    width: 560px;
    height: 200px;
  }

  .ant-card-body .table-operator {
    margin: 15px;
  }

  .anty-form-btn {
    width: 100%;
    text-align: center;
  }

  .anty-form-btn button {
    margin: 0 5px;
  }

  .anty-node-layout .ant-layout-header {
    padding-right: 0;
  }

  .header {
    padding: 0 8px;
  }

  .header button {
    margin: 0 3px;
  }

  .ant-modal-cust-warp {
    height: 100%;
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto;
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden;
  }

  #app .desktop {
    height: auto !important;
  }

  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px;
  }

  .drawer-bootom-button {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>